<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>订单</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/base.css" rel="stylesheet" />
		<link href="css/common.css" rel="stylesheet" />
		<link href="css/app.css" rel="stylesheet" />
		<style>
			.order_header{max-width: 760px;z-index: 999;}
			.order_header li{float: left;width: 20%;padding: 10px 2px 0 2px;cursor: pointer;position: relative;}
			.order_header img{display: block;margin: 0 auto;width: 20px;}
			.order_header li.active:after{height: 2px;content: " ";display: block;background: #fa4424;}
			.order_header li span{display: block;background: #f64e4e;position: absolute;text-align: center;color: #fff;font-size: 1.2rem;width: 16px;height: 16px;line-height: 16px;display: block;top: 0;left: 50%;border-radius: 8px;}
			.main{margin-top: 65px;}
			.main li{background: #fff;font-size: 1.4rem;margin-bottom: 10px;}
			.main .title{font-size: 14px;padding: 10px;}
			.main .title img{width: 15px;margin-right: 5px;vertical-align: middle;position: relative;top: -2px;}
			.main .thum{background: #efeff4;padding: 10px;}
			.main .thum img{width: 60px;margin-right: 10px;vertical-align: middle;position: relative;top: -2px;}
			.main .info{border-bottom: 1px solid #ececec;padding: 10px;}
			.main .btn{padding: 5px;text-align: right;}
			.main .btn span{border-radius: 5px;display: inline-block;padding: 5px 15px;}
			.main .btn span.cancel{border: 1px solid #898989;color: #898989;}
			.main .btn span.buy{border: 1px solid #e84945;color: #e84945;}
			
		</style>
	</head>

	<body>
		<div class="bodyWrap">
			<!--header-->
			<ul class="order_header tc f12 pt5 pf w_100 t0 oh back_fff">
				<li class="active"><img src="images/dingdanye_03.png" alt="" />全部</li>
				<li><img src="images/dingdanye_12.png" alt="" />待付款<span>3</span></li>
				<li><img src="images/dingdanye_05.png" alt="" />待确认</li>
				<li><img src="images/dingdanye_07.png" alt="" />进行中</li>
				<li><img src="images/dingdanye_09.png" alt="" />待评价</li>
			</ul>
			<ul class="main">
				<li>
					<div class="title">
						<img src="images/home1.png" alt="" />来人到家
						<span class="mui-icon-arrowright mui-icon f16"></span>
						<span class="fr c_red">待用户付款</span>
					</div>
					<div class="thum">
						<img src="img/baojie.jpg" alt="" />家庭保洁
					</div>
					<div class="info c_gray">
						<span>2017-05-05 08:16</span>
						<span class="fr c_black">共2件商品 总价：<strong>50.00元</strong></span>
					</div>
					<div class="btn">
						<span class="cancel">取消订单</span>
						<span class="buy">立即订单</span>
					</div>
				</li>
				<li>
					<div class="title">
						<img src="images/home1.png" alt="" />来人到家
						<span class="mui-icon-arrowright mui-icon f16"></span>
						<span class="fr c_red">待用户付款</span>
					</div>
					<div class="thum">
						<img src="img/baojie.jpg" alt="" />家庭保洁
					</div>
					<div class="info c_gray">
						<span>2017-05-05 08:16</span>
						<span class="fr c_black">共2件商品 总价：<strong>50.00元</strong></span>
					</div>
					<div class="btn">
						<span class="cancel">取消订单</span>
						<span class="buy">立即订单</span>
					</div>
				</li>
				<li>
					<div class="title">
						<img src="images/home1.png" alt="" />来人到家
						<span class="mui-icon-arrowright mui-icon f16"></span>
						<span class="fr c_red">待用户付款</span>
					</div>
					<div class="thum">
						<img src="img/baojie.jpg" alt="" />家庭保洁
					</div>
					<div class="info c_gray">
						<span>2017-05-05 08:16</span>
						<span class="fr c_black">共2件商品 总价：<strong>50.00元</strong></span>
					</div>
					<div class="btn">
						<span class="cancel">取消订单</span>
						<span class="buy">立即订单</span>
					</div>
				</li>
			</ul>
			<!--footer-->
			<div class="footer tc f12 pf w_100 b0">
				<div class="mui-row">
					<div class="mui-col-xs-3 row">
						<a href="index.html">
							<span><img src="images/icon2.png" alt="" /></span>
							<span>首页</span>
						</a>
					</div>
					<div class="mui-col-xs-3 row">
						<a href="classify.html">
							<span><img src="images/icon4.png" alt="" /></span>
							<span>分类</span>
						</a>
					</div>
					<div class="mui-col-xs-3 row">
						<a href="#" class="active">
							<span><img src="images/icon5.png" alt="" /></span>
							<span>订单</span>
						</a>
					</div>
					<div class="mui-col-xs-3 row">
						<a href="login.html">
							<span><img src="images/icon8.png" alt="" /></span>
							<span>我的</span>
						</a>
					</div>
				</div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/zepto.min.js"></script>
		<script src="js/app.js"></script>
		<script type="text/javascript">
			mui.init();
			$(".order_header li").click(function(){
				$(this).addClass("active").siblings().removeClass("active");
			})
		</script>
	</body>

</html>